<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../views/dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    },
    lineLegendData: {
      type: Array,
      default: () => [],
    },
    leftBottomData:{
      type: Object,
      default: () => {},
    },
    type:{
      type: Number,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      dataList:[]
    }
  },
  mounted() {
    this.$nextTick(() => {
      if(this.type==1){
        this.initChart()
      }else if(this.type == 2){
        this.initChart1()
      }
    })
  },
  beforeDestroy() {
    // if (!this.chart) {
    //   return
    // }
    // this.chart.dispose()
    // this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.dataList = [
        {
          value: this.leftBottomData.boy,
          name: '男生',
        },
        {
          value: this.leftBottomData.girl,
          name: '女生' ,
        },
      ]
      this.chart.setOption({
          tooltip : {
              trigger: 'item',
              formatter: "{b} : {c}人 ({d}%)"
          },
          legend: {
            orient: 'vertical',
            top: 'center',
            right: '0%',
            formatter: (name) => {
            const value = this.dataList.filter(x => x.name == name)[0].value
            return name + value+'人'
          },
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: true
              },
               label: {
                normal: {
                  show: true,
                  position: 'center',
                  color: '#fff',
                  formatter: `{total|${this.leftBottomData.sumStudent}}\n{active|学生总数}`,//写死的200可改为别的数值
                  rich: {
                    total: {
                      fontSize: 32,
                      fontFamily: "微软雅黑",
                      color: '#000'
                    },
                    active: {
                      fontFamily : "微软雅黑",
                      fontSize: 14,
                      color: '#000',
                      lineHeight: 30,
                    },
                  }
                },
              },
              data: [
                {
                  value: this.leftBottomData.boy,
                  name: '男生',
                  itemStyle: {
                        color: '#51ABFF'
                  }
                },
                {
                  value: this.leftBottomData.girl,
                  name: '女生' ,
                  itemStyle: {
                        color: '#FF6363'
                  }
                },
              ],
            }
          ]
      })
    },
    initChart1() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip : {
              trigger: 'item',
              formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
            top: 'center',
            right: '0%',
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            labelLine: {
                show: true
              },
               label: {
                normal: {
                  show: true,
                  position: 'center',
                  color: '#fff',
                  formatter: `{total|${this.leftBottomData.sumDevice}}\n{active|设备总数}`,//写死的200可改为别的数值
                  rich: {
                    total: {
                      fontSize: 32,
                      fontFamily: "微软雅黑",
                      color: '#000'
                    },
                    active: {
                      fontFamily : "微软雅黑",
                      fontSize: 14,
                      color: '#000',
                      lineHeight: 30,
                    },
                  }
                },
              },
            data: [
              {
                value: this.leftBottomData.shouhuanSum,
                name: '手环',
                itemStyle: {
                  color: '#3237B0'
                }
              },
              {
                value: this.leftBottomData.sleepSum,
                name: '睡眠带',
                itemStyle: {
                    color: '#009EFF'
                }
              },
              {
                value: this.leftBottomData.drinkSum,
                name: '饮水机',
                itemStyle: {
                    color: '#00CEFF'
                }
              },
              {
                value: this.leftBottomData.robotSum,
                 name: '晨检机器人',
                 itemStyle: {
                    color: '#FFA748'
                }
              },
              {
                value: this.leftBottomData.heighWeightSum,
                 name: '身高体重仪',
                 itemStyle: {
                    color: '#42FFC0'
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
